<template>
  <a-modal v-model:visible="isShow" title="媒体库信息" okText="保存" @ok="doSave" :confirmLoading="loading">
    <a-form ref="form" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item label="媒体库名称" name="name">
        <a-input v-model:value="form.name" @blur="textTrim('name')"/>
      </a-form-item>
      <a-form-item label="目录" name="folder">
        <a-input v-model:value="form.folder" placeholder="" readonly>
          <template #suffix>
            <FolderOpenOutlined @click="folderSelectShow=true"/>
          </template>
        </a-input>
      </a-form-item>
      <a-form-item label="描述" name="description">
        <a-textarea v-model:value="form.description" :rows="3"/>
      </a-form-item>
    </a-form>
  </a-modal>
  <!-- 路径选择 -->
  <a-modal v-model:visible="folderSelectShow" title="选择目录" @ok="getSelectedFolder">
    <FileSelector ref="refFileSelector"/>
  </a-modal>
</template>

<script>
import api from '../../api/api.js'
import { FolderOpenOutlined  } from '@ant-design/icons-vue'
import FileSelector from '../components/FileSelector.vue'
import { ref } from 'vue';
export default {
  name: 'LibraryAdd',
  components: {
    FolderOpenOutlined,
    FileSelector
  },
  props: {
    modelData: Object,
    success: Function,
    failure: Function
  },
  setup() {
    const refFileSelector = ref()
    const folderSelected = () => {
      return refFileSelector.value.selectedKeys
    }
    return {
      refFileSelector, folderSelected
    }
  },
  data() {
    return {
      module: 'library',
      isShow: false, loading: false, folderSelectShow: false,
      labelCol: { span: 5 },
      wrapperCol: { span: 19 },
      form: {
        id: '',
        name: '',
        folder: '',
        description: '',
      },
      rules: {
        name: [
          { required: true, message: '请填写媒体库名称', trigger: 'blur' },
          { max: 10, message: '长度需10以内', trigger: 'blur' },
        ],
        folder: [
          { required: true, message: '请选择目录', trigger: 'blur' },
          // { max: 20, message: '长度需为20以内', trigger: 'blur' },
        ],
        description: [
          { max: 100, message: '长度需为100以内', trigger: 'blur' },
        ],
      }
    }
  },
  methods: {
    open(form) {
        this.form = form
        this.isShow = true
    },
    textTrim(col) {
      this.form[col] = this.form[col] ? this.form[col].trim() : ''
    //   console.log(`'${this.form[col]}'`)
    },
    getSelectedFolder() {
      this.form.folder = this.folderSelected()[0]
      this.folderSelectShow = false
    },
    doSave() {
      this.$refs.form
      .validate()
      .then(() => {
        // console.log('values', this.form);
        this.loading = true
        api.save(this.module, this.form).then(response => {
          if (response.data.code === 1) {
            this.isShow = false
            this.form = {}
            this.$message.success('保存成功')
            // 回调
            this.$nextTick(()=>{
                this.success && this.success()
            })
          } else {
            this.$message.error(`保存失败：${response.data.message}`)
            // 
            this.failure && this.failure()
          }
        }).catch((error)=>{
          this.$message.error(`保存失败：${error.message}`)
        }).then(()=>{
          this.loading = false
        })
      })
      .catch(error => {
        console.log('error', error);
      })
    },
  }
}
</script>